<style scoped>
.top {
  width: 100%;
  height: 46px;
  position: fixed;
  top: 0;
  background: linear-gradient(#16171b, #516464);
  color: white;
  display: flex;
  align-items: center;
  text-indent: 4px;
  z-index: 1;
}
.center {
  margin-top: 46px;
  margin-bottom: 42px;
  background-color: #f0f0f0;
}
.footer {
  width: 100%;
  height: 42px;
  position: fixed;
  bottom: 0;
  background-color: #d0011b;
  color: white;
  line-height: 42px;
  text-align: center;
}
.top .vicon {
  color: white;
  font-size: 26px;
  margin-top: 5px;
}
.hr {
  width: 100%;
  height: 1px;
}
.div1 {
  width: 100%;
  height: 50px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.div1 p {
  width: 80%;
}
.div1 .cvi {
  font-size: 20px;
  color: #f0f0f0;
}
.div2 {
  width: 100%;
  height: 50px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.div2 p {
  width: 68%;
}
.div3 {
  width: 100%;
  height: 50px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.div3 p {
  width: 68%;
}
</style>

<template>
  <div>
    <div class="top">
      <router-link to="/">
        <van-icon class="vicon" name="arrow-left" />
      </router-link>设置
    </div>
    <div class="center">
      <div class="div1">
        <p>个人信息</p>
        <van-icon class="cvi" name="arrow" />
      </div>
      <div class="hr"></div>
      <div class="div1">
        <p>地址管理</p>
        <van-icon class="cvi" name="arrow" />
      </div>
      <div class="hr"></div>
      <div class="div1">
        <p>账号安全</p>
        <van-icon class="cvi" name="arrow" />
      </div>
      <div class="hr"></div>
      <div class="div1">
        <p>隐私设置</p>
        <van-icon class="cvi" name="arrow" />
      </div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="div1">
        <p>消息推送</p>
        <van-icon class="cvi" name="arrow" />
      </div>
      <div class="hr"></div>
      <div class="div1" style="font-size: 14px;">
        <p>
          您可能错过物流动态、优惠促销等消息
          <br />您可以在系统设置中更改
        </p>
        <van-icon class="cvi" name="arrow" />
      </div>
      <div class="hr"></div>
      <div class="div2">
        <p>2G/3G网络显示原图</p>
        <van-switch v-model="checked" size="24px" active-color="#07c160" inactive-color="#fff" />
      </div>
      <div class="hr"></div>
      <div class="div2">
        <p>WIFI环境下自动更新</p>
        <van-switch v-model="checked1" size="24px" active-color="#07c160" inactive-color="#fff" />
      </div>
      <div class="hr"></div>
      <div class="div2">
        <p>摇一摇,截屏反馈Bug</p>
        <van-switch v-model="checked2" size="24px" active-color="#07c160" inactive-color="#fff" />
      </div>
      <div class="hr"></div>
      <div class="div3">
        <p>清理缓存</p>
        <span>33.25M</span>
      </div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="div1">
        <p>评价有货</p>
        <van-icon class="cvi" name="arrow" />
      </div>
      <div class="hr"></div>
      <div class="div1">
        <p>关于有货</p>
        <van-icon class="cvi" name="arrow" />
      </div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
      <div class="hr"></div>
    </div>
    <div class="footer" @click="fn">退 出 登 录</div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from "vant";

export default {
  data() {
    return {
      show: false,
      checked: true,
      checked1: true,
      checked2: false
    };
  },
  methods: {
    fn() {
      Dialog.confirm({
        title: "退出登录",
        message: "你确定要退出吗？",
      })
        .then(() => {
          this.$router.push("/login");
          Toast({
            message: "已退出登录",
            icon: "warning"
          });
        })
        .catch(() => {});
    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component
  }
};
</script>

